<template>
	<view class="body" >
		<view class="header">
			<!-- 店铺信息开始 -->
			<view class="store-view" >
				<view class="store-img" >
					<image :src="storeDetail.store_log" ></image>
				</view>
				<view>
					<view>{{storeDetail.store_name}}</view>
					<view class="text-view" >
						<text style="color: #666;" >联系电话:</text>
						<text style="color: #666;" >{{storeDetail.store_principal_phone}}</text>
					</view>
					<view class="text-view" >
						<text style="color: #666;" >店铺地址:</text>
						<text style="color: #666;" >{{storeDetail.address}}</text>
					</view>
				</view>
			</view>
			<!-- 店铺信息结束 -->
			
			<view class="navbar">
				<view :style="{color: filterIndex === 0 ? '#fa4367' : ''}" class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
					<!-- <view :style="{borderColor: filterIndex === 0 ? '#fa436a' : ''}" :class="{navItemBefore: filterIndex === 0}"></view> -->
					综合排序
				</view>
				<view :style="{color: filterIndex === 1 ? '#fa436a' : ''}" class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
					<text>销量</text>
					<view class="p-box">
						<text :style="{color: saleOrder === 1 && filterIndex === 1 ? '#fa436a' : ''}" :class="{active: saleOrder === 1 && filterIndex === 1}" class="yticon icon-shang"></text>
						<text :style="{color: saleOrder === 2 && filterIndex === 1 ? '#fa436a' : ''}" :class="{active: saleOrder === 2 && filterIndex === 1}" class="yticon icon-shang xia"></text>
					</view>
				</view>
				<view :style="{color: filterIndex === 3 ? '#fa436a' : ''}" class="nav-item" :class="{current: filterIndex === 3}" @click="tabClick(3)">
					<!-- <view :style="{borderColor: filterIndex === 3 ? '#fa436a' : ''}" :class="{navItemBefore: filterIndex === 3}"></view> -->
					<text>上架时间</text>
					<view class="p-box">
						<text :style="{color: timeOrder === 1 && filterIndex === 3 ? '#fa436a' : ''}" :class="{active: timeOrder === 1 && filterIndex === 3}" class="yticon icon-shang"></text>
						<text :style="{color: timeOrder === 2 && filterIndex === 3 ? '#fa436a' : ''}" :class="{active: timeOrder === 2 && filterIndex === 3}" class="yticon icon-shang xia"></text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="place-view" ></view>
		
		<!-- 右边的scrollView开始 -->
		<scroll-view scroll-with-animation scroll-y class="right-view">
			<view class="goods-list">
				<view 
					v-for="(item, index) in goodsList" :key="index"
					class="goods-item"
					@click="navToDetailPage(item.id)"
				>
					<view class="image-wrapper">
						<image :src="item.goods_img" mode="aspectFill"></image>
					</view>
					<text class="title">{{item.goods_name}}</text>
					<text class="des">{{item.goods_brief}}</text>
					<view class="price-box">
						<text class="price">{{item.shop_price}}</text>
						<view class="detail-btn" @click.stop="navToMap()">导航去商家</view>
					</view>
				</view>
			</view>
			<!-- <view class="right-item"  v-for="(item,index) in leftTit" :key="index" @click="goodsDetail" >
				<view>
					<image :src="item.store_name" mode="aspectFill" ></image>
				</view>
				<view class="right-detail" >
					<view class="name" >旗舰店</view>
					<view class="text1" >联系电话:<text>15588776655</text></view>
					<view class="text1" >地址:<text>浙江省台州实椒江区</text></view>
					
					<view class="text2" >补贴5个点</view>
					
					<view class="detail" >
						<view class="title" >实体商家</view>
						<view class="detail-btn" >导航去商家</view>
					</view>
				</view>
			</view> -->
			
			<!-- 占位用的 -->
			
		</scroll-view>
		<!-- 右边的scrollView结束 -->
		
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				msg:'',
				searchKws: '',
				filterIndex: 0,
				saleOrder: 0,
				timeOrder: 0,
				order: 1,
				leftTit: [],
				form: {
					pageNum: 9999,
					page: 1,
					store_id: ''   ,//店铺ID
					goods_type: ''   ,//普通商品还是积分商品
					type_sort: 1	   ,//1.综合排序 2.信用排序 3.价格降序 4.价格升序 5.销量排序
					goods_name: ''    //
				},
				storeDetail: ""    ,//店铺信息
				goodsList: []       //商品列表
			}
		},
		onLoad(options) {
			if(options.id){
				this.store(options.id);
			}else if(options.data != undefined){
				const data = JSON.parse(options.data);
				this.msg = JSON.parse(options.data);
				this.form.store_id = data.store_id;
				this.storeDetail = data;
				uni.setNavigationBarTitle({
				    title: this.storeDetail.store_name
				});
			}
			
			this.loadData();
			
			console.log('返回当前',this.$store.hasLogin)
		},
		methods:{
			store(id){
				this.$https.Classification.storeDetail(id).then(res=>{
					this.msg = res;
					this.form.store_id = res.store_id;
					this.storeDetail = res;
					uni.setNavigationBarTitle({
					    title: this.storeDetail.store_name
					});
				})
			},
			navToDetailPage(id){
				uni.navigateTo({
					url: '/pages/Classification/goodsDetail?id='+id+'&data='+JSON.stringify(this.msg)
				})
			},
			navToMap(){
				let that = this;
				uni.openLocation({
				    latitude: Number(that.msg.lat),
				    longitude:  Number(that.msg.long),
					name:that.msg.store_name,
					address:that.msg.address,
				    success: function () {
				        console.log('success');
				    },
					fail:function(res){
						console.log('res',res)
					}
				});
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type='add', loading) {
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				if(type === 'refresh'){
					this.form.page = 1;
				}
				
				this.$https.Classification.getStoreList(this.form).then(res=>{
					if(type === 'refresh'){
						this.goodsList = [];
					}
					this.goodsList = this.goodsList.concat(res.data);
					this.form.page++;
					//判断是否还有下一页，有是more  没有是nomore
					this.loadingType  = this.form.page > res.last_page ? 'nomore' : 'more';
					if(type === 'refresh'){
						if(loading == 1){
							uni.hideLoading()
						}else{
							uni.stopPullDownRefresh();
						}
					}
				})
			},
			tabClick(index){
				if(this.filterIndex === index && index == 0 ){
					return;
				}
				this.filterIndex = index;
				if(index === 0){
					this.form.type_sort = 1;
				}else if(index === 1){  //销量的升序和降序啊
					this.saleOrder = this.saleOrder === 2 ? 1: 2;
					console.log('this.saleOrder',this.saleOrder)
					if(this.saleOrder === 1){  //升序
						this.form.type_sort = 7;
					}else if(this.saleOrder === 2){ //降序
						this.form.type_sort = 6;
					}
				}else if(index === 3){   //上架时间的升序和降序
					this.timeOrder = this.timeOrder === 2 ? 1: 2;
					if(this.timeOrder === 1){  //升序
						this.form.type_sort = 3;
					}else if(this.timeOrder === 2){  //降序
						this.form.type_sort = 2;
					}
				}
				// uni.pageScrollTo({
				// 	duration: 300,
				// 	scrollTop: 0
				// })
				this.loadData('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			},
			goodsDetail(){  //商品详情
				uni.navigateTo({
					url: '../Classification/goodsDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped >
	
	page,.body{
		width: 100%;
		height: 100%;
		
		background-color: rgb(250,250,250);
	}
	
	.header{
		
		position: fixed;
		left: 0;
		// top: calc( 0 + var(--status-bar-height) );
		top: 0;
		
		z-index: 1;
		
		padding: 20rpx 0 14rpx 0;
	
		height: 270rpx;
		width: 100%;
		
		background-color: #FFFFFF;
		
		box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
		
		.store-view{
			display: flex;
			align-items: center;
			
			padding: 20rpx;
			
			.store-img{
				
				margin-right: 30rpx;
				
				width: 80rpx;
				height: 80rpx;
				
				font-size: $uni-font-size-base;
				
				image{
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
				
				.text-view{
					color: #666;
				}
			}
			
		}
	}
	
	.navbar{
	
		display: flex;
		width: 100%;
		background: #fff;
		height: 80upx;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: #303133;
			position: relative;
			&.current{
				color: #fa436a;
				// &:after{
				// 	content: '';
				// 	position: absolute;
				// 	left: 50%;
				// 	bottom: 0;
				// 	transform: translateX(-50%);
				// 	width: 120upx;
				// 	height: 0;
				// 	border-bottom: 4upx solid #fa436a;
				// }
			}
			.navItemBefore{
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 120upx;
				height: 0;
				border-bottom: 4upx solid #fa436a;
			}
		}
		.p-box{
			display: flex;
			flex-direction: column;
			.yticon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;
				&.active{
					color: #fa436a;
				}
			}
			.xia{
				transform: scaleY(-1);
			}
		}
		.cate-item{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;
			&:after{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}
	
	.place-view{
		height: calc( 290rpx );
	}
	
	.content{
		margin-top: 10rpx;
		
		width: 100%;
		background-color: #FFFFFF;
	}
	
	
	.right-view{
		
		flex: 1;
		width: 100%;
		height: calc(100vh - 200rpx);
		background-color: rgb(250,250,250);
		
		.right-item{
			
			display: flex;
			align-items: center;
			
			margin: 16rpx 0 16rpx 0;
			padding: 16rpx 10rpx 0 10rpx;
			
			font-size: $uni-font-size-base;
			
			width: 100%;
			
			background-color: #FFFFFF;
			
			&:first-child{
				margin-top: 0;
			}
			
			.right-detail{
				flex: 1;
				margin-right: 20rpx;
				
			}
			
			image{
				
				border-radius: 10rpx;
				
				width: 260rpx;
				height: 260rpx;
			}
			
			view{
				margin: 0 0 8rpx 10rpx;
				
				text-align: left;
			}
			
			.text1{
				color: #666;
			}
			
			.text2{
				
				margin-top: 20rpx;
				
				font-size: $uni-font-size-base;
				color: $uni-color-error;
			}
			
			.title{
				color: $uni-color-error;
			}
			
			.detail{
				
				
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				
				margin-left: 0;
				
				width: 100%;
				
				.detail-btn{
					
					padding: 8rpx 10rpx;
					
					font-size: $uni-font-size-base;
					color: #FFFFFF;
					background-color: $uni-color-error;
				}
			}
		}
	}
	/* 商品列表 */
	.goods-list{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #fff;
		.goods-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-base;
			color: $font-color-dark;
			margin-top: 10upx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.des{
			font-size: 24upx;
			color: #999;
			margin-bottom: 10upx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.price-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10upx;
			font-size: 24upx;
			color: $font-color-light;
			.detail-btn{
				padding: 8rpx 10rpx;
				font-size: $uni-font-size-base;
				color: #FFFFFF;
				background-color: $uni-color-error;
			}
		}
		.price{
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
			&:before{
				content: '￥';
				font-size: 26upx;
			}
		}
		.store{
			margin-top: 10upx;
			font-size: 24upx;
			color: #666;
		}
		.icon-you{
			color: #666;
			font-size: 24upx;
		}
	}
</style>